<template>
  <div class="container">
    <span>员工人数分布：</span>
    <div
      id="homePieCharts"
      :class="className"
      :style="{ height: height, width: width }"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
      required: false,
    },
    height: {
      type: String,
      default: "300px",
      required: false,
    },
  },
  created() {},
  mounted() {
    this.getData();
    // this.$nextTick 是一个回调函数，确保我们dom渲染完后执行
    // this.$nextTick(() => {
    //   this.initChart();
    // });
  },
  data() {
    return {
      employeeData: "",
    };
  },
  methods: {
    getData() {
      this.userData = this.$store
        .dispatch("request/get", "/user/list/position/distribution")
        .then((data) => {
          this.employeeData = data;
          this.initChart();
        });
    },
    initChart() {
      const pieChart = echarts.init(document.getElementById("homePieCharts"));
      pieChart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          left: "center",
          bottom: "10",
          data: [
            this.employeeData[0].roleName,
            this.employeeData[1].roleName,
            this.employeeData[2].roleName,
            this.employeeData[3].roleName,
          ],
        },
        series: [
          {
            color: ["#435EBE", "#5DDAB4", "#9694FF", "#FF7976", "#57CAEB"],
            name: "WEEKLY WRITE ARTICLES",
            type: "pie",
            roseType: "radius",
            radius: [15, 95],
            center: ["50%", "38%"],
            data: [
              { value: this.employeeData[0].counts, name: this.employeeData[0].roleName },
              { value: this.employeeData[1].counts, name: this.employeeData[1].roleName  },
              { value: this.employeeData[2].counts, name: this.employeeData[2].roleName  },
              { value: this.employeeData[3].counts, name: this.employeeData[3].roleName  }
            ],
            animationEasing: "cubicInOut",
            animationDuration: 2600,
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>